<template>
    <view class="marriage-member-container">
        <view class="content-wrapper">
            <!-- 服务特色展示区域 -->
            <view class="features-section">
                <view class="section-header">
                    <text class="section-title">会员专享服务</text>
                    <text class="section-subtitle">享受更多优质服务</text>
                </view>
                <view class="features-grid">
                    <view class="feature-item" v-for="(item,index) in dataList" :key="index">
                        <view class="feature-icon">
                            <text :class="item.icon"></text>
                        </view>
                        <text class="feature-label">{{item.name}}</text>
                    </view>
                </view>
            </view>

            <!-- 会员套餐选择区域 -->
            <view class="membership-section">
                <view class="section-header">
                    <text class="section-title">选择会员套餐</text>
                </view>
                <scroll-view class="membership-scroll" scroll-x="true" scroll-left="0">
                    <view class="membership-cards">
                        <view class="membership-card" 
                              v-for="(item, index) in member" 
                              :key="index"
                              @click="Selects(index)" 
                              :class="{ 'selected': initTimeIndex === index }">
                            <view class="card-content">
                                <text class="membership-name">{{ item.name }}</text>
                                <view class="price-container">
                                    <text class="currency">￥</text>
                                    <text class="price">{{ item.price }}</text>
                                </view>
                            </view>
                        </view>
                    </view>
                </scroll-view>
            </view>

            <!-- 邀请人ID输入区域 -->
            <view class="invite-section">
                <view class="invite-header">
                    <text class="invite-title">邀请人ID</text>
                    <text class="invite-subtitle">（必填）</text>
                </view>
                <view class="input-container">
                    <input type="text" 
                           v-model="inviteUserId" 
                           placeholder="请输入邀请人ID" 
                           class="invite-input" 
                           placeholder-style="color: #999;" />
                </view>
            </view>
            <!-- 底部支付区域 -->
            <view class="payment-section">
                <view class="payment-info">
                    <view class="selected-info">
                        <text class="info-label">已选择：</text>
                        <text class="selected-name">{{ member[initTimeIndex].name }}</text>
                    </view>
                    <view class="price-info">
                        <text class="info-label">价格：</text>
                        <text class="currency">￥</text>
                        <text class="final-price">{{ member[initTimeIndex].price }}</text>
                    </view>
                </view>
                <view class="payment-button-container">
                    <button 
                        @click="open"
                        class="payment-button">
                        立即开通
                    </button>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
    import $wxsdk from '@/common/lib/sdk-h5-weixin';
    import tuiRow from "@/components/thorui/tui-row/tui-row.vue"
    import tuiCol from "@/components/thorui/tui-col/tui-col.vue"
    import tuiGrid from "@/components/thorui/tui-grid/tui-grid.vue"
    import tuiGridItem from "@/components/thorui/tui-grid-item/tui-grid-item.vue"
    import tuiBannerArc from "@/components/thorui/tui-banner-arc/tui-banner-arc.vue"
    import tuiTable from "@/components/thorui/tui-table/tui-table.vue"
    import tuiTr from "@/components/thorui/tui-tr/tui-tr.vue"
    export default {
        data() {
            return {
                background: ['color1','color2','color3'],
                indicatorDots: true,
                autoplay: true,
                initTimeIndex: 0,
                interval: 2000,
                duration: 500,
                inviteUserId: '',
                dataList: [{
                    name: "服务时间",
                    icon: 'iconfont icon-fuwu'
                },{
                    name: "线上服务",
                    icon: 'iconfont icon-xianshang'
                },{
                    name: "线下团体活动服务",
                    icon: 'iconfont icon-shuilishehuituanti'
                },{
                    name: "红娘精准配对",
                    icon: 'iconfont icon-zuanshi'
                },{
                    name: "星级红娘一对一配对服务",
                    icon: 'iconfont icon-yiduiyi'
                }],
                openid: '',
                member: [
                    { name: '会员',price: 99,prices: 0.6 },
                    { name: 'VIP会员',price: 299,prices: 0.62 },
                    { name: '银卡会员',price: 999,prices: 0.7 },
                    { name: '金卡会员',price: 2999,prices: 0.7 },
                    { name: '钻石会员',price: 9999,prices: 0.7 },
                ],
                header: [
                    {
                        title: '服务时间',
                        key: 'time'
                    },
                    {
                        title: '线上服务',
                        key: 'online'
                    },
                    {
                        title: '线下团体活动服务',
                        key: 'group'
                    },
                    {
                        title: '红娘精准配对',
                        key: 'precise'
                    },
                    {
                        title: '星级红娘一对一配对服务',
                        key: 'vip'
                    }
                ],
                listData: [{
                    id: 1,
                    time: '月度',
                    online: '是',
                    group: '',
                    precise: '',
                    vip: ''
                },
                {
                    id: 2,
                    time: '年度',
                    online: '是',
                    group: '是',
                    precise: '',
                    vip: ''
                },
                {
                    id: 3,
                    time: '年度',
                    online: '是',
                    group: '是',
                    precise: '4次',
                    vip: ''
                },
                {
                    id: 4,
                    time: '年度',
                    online: '是',
                    group: '是',
                    precise: '12次',
                    vip: ''
                },
                {
                    id: 5,
                    time: '年度',
                    online: '是',
                    group: '是',
                    precise: '',
                    vip: '不限次'
                }
                ]
            }
        },
        mounted() {
            var t = this
            this.loadList()
            t.$api.req(`/member/social-user/get?type=34`,{
            },'GET',"JSON",false).then(res => {
                if (res.code === 0) {
                    this.openid = res.data.openid
                }

            });
        },
        methods: {
            loadList() {
                var t = this
                t.$api.req(`/station/spu/get?id=2`,{
                },'GET',"JSON",false).then(res => {
                    if (res.code === 0 && res.data.skus) {
                        // 处理接口返回的 skus 数据
                        t.member = res.data.skus.map(item => ({
                            id: item.id,
                            name: item.properties, // 会员名称
                            price: (item.price / 100).toFixed(2),     // 会员价格
                            prices: (item.price / 100).toFixed(2) * 0.6, // 假设此处是某种折扣，示例为价格的60%
                        }))
                    }

                });
            },
            Selects(index) {
                this.initTimeIndex = index
            },
            open() {
                debugger
                var t = this
                console.log('点击立即开通按钮')
                console.log('当前选择的会员:', t.member[t.initTimeIndex])
                console.log('邀请人ID:', t.inviteUserId)
                
                // 验证邀请人ID必填
                if (!t.inviteUserId || t.inviteUserId.trim() === '') {
                    uni.showToast({
                        title: '请输入邀请人ID',
                        icon: 'none',
                        duration: 2000
                    });
                    return;
                }
                
                // 构建请求数据
                let requestData = {
                    skuId: t.member[t.initTimeIndex].id,
                    inviteUserId: t.inviteUserId.trim()
                }
                
                console.log('请求数据:', requestData)
                
                t.$api.req(`/station/pay-order/create`, requestData, 'POST', "JSON", false).then(res => {
                    console.log('创建订单响应:', res)
                    if (res.code === 0) {
                        var orderId = res.data
                        let data = {
                            id: orderId,
                            channelCode: 'wx_lite',
                            channelExtras: { openid: this.openid },
                        };
                        console.log('支付数据:', data)
                        
                        t.$api.req(`/pay/order/submit`, data, 'POST', "JSON", false).then(res1 => {
                            console.log('支付提交响应:', res1)
                            if (res1.code === 0) {
                                const payConfig = JSON.parse(res1.data.displayContent);
                                console.log('支付配置:', payConfig);
                                uni.requestPayment({
                                    provider: 'wxpay',
                                    timeStamp: payConfig.timeStamp,
                                    nonceStr: payConfig.nonceStr,
                                    package: payConfig.packageValue,
                                    signType: payConfig.signType,
                                    paySign: payConfig.paySign,
                                    success: (res2) => {
                                        console.log('支付成功:', res2);
                                        this.f.nav(`/subPackage1/payResult/payResult?id=${orderId}`)
                                    },
                                    fail: (err) => {
                                        console.log('支付失败:', err);
                                        if (err.errMsg === 'requestPayment:fail cancel') {
                                            uni.showToast({
                                                title: '支付已取消',
                                                icon: 'none'
                                            });
                                        } else {
                                            uni.showToast({
                                                title: '支付失败',
                                                icon: 'none'
                                            });
                                        }
                                    },
                                });
                            } else {
                                console.error('支付提交失败:', res1)
                                uni.showToast({
                                    title: res1.msg || '支付提交失败',
                                    icon: 'none'
                                });
                            }
                        }).catch(err => {
                            console.error('支付提交请求失败:', err)
                            uni.showToast({
                                title: '网络错误，请重试',
                                icon: 'none'
                            });
                        });
                    } else {
                        console.error('创建订单失败:', res)
                        uni.showToast({
                            title: res.msg || '创建订单失败',
                            icon: 'none'
                        });
                    }
                }).catch(err => {
                    console.error('创建订单请求失败:', err)
                    uni.showToast({
                        title: '网络错误，请重试',
                        icon: 'none'
                    });
                });
            }
        }
    }
</script>

<style scoped>
/* 页面整体容器 - 奢华风格 */
.marriage-member-container {
    min-height: 100vh;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 25%, #0f3460 50%, #533483 75%, #7209b7 100%);
    position: relative;
    padding-bottom: 180rpx;
    overflow-x: hidden;
}

.marriage-member-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 20%, rgba(255, 215, 0, 0.1) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(255, 215, 0, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 40% 60%, rgba(255, 215, 0, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.content-wrapper {
    padding: 0 40rpx;
    position: relative;
    z-index: 2;
}

/* 服务特色展示区域 - 高端卡片 */
.features-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 30rpx;
    padding: 50rpx 40rpx;
    margin: 40rpx 0;
    backdrop-filter: blur(20px);
    border: 2rpx solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 20rpx 40rpx rgba(0, 0, 0, 0.3),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.features-section::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, transparent, rgba(255, 215, 0, 0.1), transparent);
    animation: shimmer 3s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0% { transform: translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform: translateX(100%) translateY(100%) rotate(45deg); }
}

.section-header {
    text-align: center;
    margin-bottom: 50rpx;
    position: relative;
}

.section-title {
    display: block;
    font-size: 48rpx;
    font-weight: 800;
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 15rpx;
    text-shadow: 0 0 30rpx rgba(255, 215, 0, 0.5);
    letter-spacing: 2rpx;
}

.section-subtitle {
    display: block;
    font-size: 28rpx;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 300;
    letter-spacing: 1rpx;
}

.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 30rpx;
}

.feature-item {
    width: 30%;
    text-align: center;
    position: relative;
}

.feature-icon {
    width: 100rpx;
    height: 100rpx;
    background: linear-gradient(145deg, rgba(255, 215, 0, 0.2), rgba(255, 215, 0, 0.1));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20rpx;
    transition: all 0.4s ease;
    border: 2rpx solid rgba(255, 215, 0, 0.3);
    box-shadow: 0 10rpx 25rpx rgba(255, 215, 0, 0.2);
}

.feature-icon:hover {
    transform: translateY(-10rpx) scale(1.1);
    box-shadow: 0 20rpx 40rpx rgba(255, 215, 0, 0.4);
}

.feature-icon text {
    font-size: 40rpx;
    color: #ffd700;
    text-shadow: 0 0 20rpx rgba(255, 215, 0, 0.8);
}

.feature-label {
    font-size: 26rpx;
    color: #ffffff;
    line-height: 1.5;
    font-weight: 500;
    letter-spacing: 1rpx;
}

/* 会员套餐选择区域 - VIP风格 */
.membership-section {
    margin: 50rpx 0;
    position: relative;
}

.membership-scroll {
    white-space: nowrap;
    margin-top: 40rpx;
    padding: 20rpx 0;
}

.membership-cards {
    display: inline-flex;
    gap: 30rpx;
    padding: 0 30rpx;
}

.membership-card {
    display: inline-block;
    width: 240rpx;
    height: 320rpx;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    border-radius: 25rpx;
    border: 3rpx solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 15rpx 35rpx rgba(0, 0, 0, 0.1),
        0 5rpx 15rpx rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.membership-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(145deg, #ffd700, #ffed4e);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 1;
}

.membership-card::after {
    content: '';
    position: absolute;
    top: -2rpx;
    left: -2rpx;
    right: -2rpx;
    bottom: -2rpx;
    background: linear-gradient(145deg, #ffd700, #ffed4e, #ffd700);
    border-radius: 25rpx;
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: -1;
}

.membership-card.selected {
    transform: translateY(-15rpx) scale(1.05);
    box-shadow: 
        0 25rpx 50rpx rgba(255, 215, 0, 0.3),
        0 10rpx 30rpx rgba(255, 215, 0, 0.2);
}

.membership-card.selected::before {
    opacity: 0.15;
}

.membership-card.selected::after {
    opacity: 1;
}

.card-content {
    position: relative;
    z-index: 2;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 30rpx 20rpx;
}

.membership-name {
    font-size: 32rpx;
    font-weight: 800;
    color: #2c3e50;
    margin-bottom: 25rpx;
    text-align: center;
    letter-spacing: 1rpx;
}

.membership-card.selected .membership-name {
    color: #b8860b;
    text-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
}

.price-container {
    margin-bottom: 0;
}

.currency {
    font-size: 28rpx;
    color: #ff6b35;
    font-weight: 700;
}

.price {
    font-size: 42rpx;
    color: #ff6b35;
    font-weight: 800;
    text-shadow: 0 0 15rpx rgba(255, 107, 53, 0.3);
}

/* 邀请人ID输入区域 - 高端设计 */
.invite-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 30rpx;
    padding: 40rpx;
    margin: 40rpx 0;
    backdrop-filter: blur(20px);
    border: 2rpx solid rgba(255, 215, 0, 0.3);
    box-shadow: 
        0 20rpx 40rpx rgba(0, 0, 0, 0.3),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.2);
    position: relative;
}

.invite-header {
    display: flex;
    align-items: center;
    margin-bottom: 25rpx;
}

.invite-title {
    font-size: 32rpx;
    color: #ffd700;
    font-weight: 600;
    letter-spacing: 1rpx;
}

.invite-subtitle {
    font-size: 24rpx;
    color: #ff6b6b;
    margin-left: 15rpx;
    font-weight: 500;
}

.input-container {
    position: relative;
}

.invite-input {
    width: 100%;
    height: 90rpx;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
    border-radius: 20rpx;
    border: 2rpx solid transparent;
    padding: 0 30rpx;
    font-size: 30rpx;
    color: #2c3e50;
    transition: all 0.4s ease;
    box-sizing: border-box;
    box-shadow: 
        0 10rpx 25rpx rgba(0, 0, 0, 0.1),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.8);
}

.invite-input:focus {
    border-color: #ffd700;
    background: #ffffff;
    box-shadow: 
        0 0 0 6rpx rgba(255, 215, 0, 0.2),
        0 15rpx 35rpx rgba(0, 0, 0, 0.15);
    transform: translateY(-2rpx);
}

/* 底部支付区域 - 奢华固定栏 */
.payment-section {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(145deg, rgba(26, 26, 46, 0.95), rgba(22, 33, 62, 0.95));
    backdrop-filter: blur(30px);
    border-top: 2rpx solid rgba(255, 215, 0, 0.3);
    padding: 25rpx 40rpx;
    box-shadow: 
        0 -15rpx 40rpx rgba(0, 0, 0, 0.4),
        inset 0 1rpx 0 rgba(255, 255, 255, 0.1);
}

.payment-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25rpx;
}

.selected-info, .price-info {
    display: flex;
    align-items: center;
}

.info-label {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-right: 15rpx;
    font-weight: 500;
}

.selected-name {
    font-size: 30rpx;
    color: #ffd700;
    font-weight: 700;
    text-shadow: 0 0 10rpx rgba(255, 215, 0, 0.5);
}

.final-price {
    font-size: 36rpx;
    color: #ffd700;
    font-weight: 800;
    text-shadow: 0 0 15rpx rgba(255, 215, 0, 0.6);
}

.payment-button-container {
    width: 100%;
}

.payment-button {
    width: 100%;
    height: 90rpx;
    border-radius: 45rpx;
    font-size: 36rpx;
    font-weight: 800;
    color: #ffffff;
    background: linear-gradient(135deg, #ffd700, #ffed4e, #ffd700);
    box-shadow: 
        0 15rpx 35rpx rgba(255, 215, 0, 0.4),
        0 5rpx 15rpx rgba(255, 215, 0, 0.2);
    transition: all 0.3s ease;
    letter-spacing: 2rpx;
    text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
    border: none;
    outline: none;
    margin: 0;
    padding: 0;
}

.payment-button:active {
    transform: translateY(3rpx);
    box-shadow: 
        0 8rpx 20rpx rgba(255, 215, 0, 0.4),
        0 2rpx 8rpx rgba(255, 215, 0, 0.2);
}

.payment-button::after {
    border: none;
}

/* 响应式设计 */
@media screen and (max-width: 750rpx) {
    .features-grid {
        justify-content: space-around;
    }
    
    .feature-item {
        width: 45%;
    }
    
    .membership-card {
        width: 200rpx;
        height: 300rpx;
    }
    
    .section-title {
        font-size: 42rpx;
    }
}

/* 高端动画效果 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(50rpx);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50rpx);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.features-section {
    animation: fadeInUp 0.8s ease-out;
}

.membership-section {
    animation: slideInLeft 0.8s ease-out 0.2s both;
}

.invite-section {
    animation: fadeInUp 0.8s ease-out 0.4s both;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    display: none;
}

/* 兼容性处理 */
.membership-card {
    -webkit-tap-highlight-color: transparent;
}

.invite-input {
    -webkit-appearance: none;
    appearance: none;
}

/* 高端装饰元素 */
.features-section::after {
    content: '✦';
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    font-size: 24rpx;
    color: rgba(255, 215, 0, 0.6);
    animation: twinkle 2s infinite;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.6; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}
</style>